تسلط بر ترکیب‌های منطقی CSS Container Query: آزادسازی قدرت عملگرهای منطقی کوئری

کوئری‌های کانتینر CSS (CSS container queries) نشان‌دهنده یک تحول بزرگ در طراحی وب واکنش‌گرا هستند که به توسعه‌دهندگان اجازه می‌دهند تا عناصر را بر اساس اندازه یا وضعیت عنصر دربرگیرنده‌شان (کانتینر) استایل‌دهی کنند، نه بر اساس ویوپورت (viewport). در حالی که کوئری‌های کانتینر پایه انعطاف‌پذیری قدرتمندی را ارائه می‌دهند، پتانسیل واقعی آن‌ها با ترکیب با عملگرهای منطقی آشکار می‌شود. این راهنمای جامع به چگونگی استفاده از 'and'، 'or' و 'not' برای ایجاد طرح‌بندی‌های پیچیده و سازگاری که دقیقاً به شرایط کانتینر واکنش نشان می‌دهند، می‌پردازد.

کوئری‌های کانتینر CSS چیست؟ یک مرور سریع

قبل از پرداختن به عملگرهای منطقی، بیایید به سرعت مرور کنیم که کوئری‌های کانتینر چه هستند و چرا اهمیت دارند.

مدیا کوئری‌های سنتی مبتنی بر ویوپورت هستند، به این معنی که به اندازه پنجره مرورگر واکنش نشان می‌دهند. از سوی دیگر، کوئری‌های کانتینر به شما این امکان را می‌دهند که استایل‌ها را بر اساس اندازه یا وضعیت یک عنصر دربرگیرنده اعمال کنید. این امر کنترل دقیق‌تری را فراهم کرده و طراحی واکنش‌گرای واقعاً مبتنی بر کامپوننت را ممکن می‌سازد.

به عنوان مثال، ممکن است یک کامپوننت کارت داشته باشید که اطلاعاتی را نمایش می‌دهد. با کوئری‌های کانتینر، می‌توانید طرح‌بندی کارت را بر اساس عرض آن در کانتینر والد تنظیم کنید. اگر کارت به اندازه کافی عریض باشد، می‌تواند اطلاعات را در یک ردیف نمایش دهد؛ اگر باریک باشد، می‌تواند عناصر را به صورت عمودی روی هم بچیند. این تضمین می‌کند که کارت بدون توجه به اینکه در کجای صفحه قرار گرفته است، ظاهر خوبی داشته باشد.

برای استفاده از کوئری‌های کانتینر، ابتدا باید یک بستر کانتینر (container context) روی یک عنصر ایجاد کنید. این کار با استفاده از خاصیت container-type انجام می‌شود. دو مقدار رایج آن عبارتند از:

• size: کوئری کانتینر هم به عرض و هم به ارتفاع کانتینر واکنش نشان می‌دهد.
• inline-size: کوئری کانتینر به اندازه در راستای خطی (inline size) واکنش نشان می‌دهد (معمولاً عرض در حالت نوشتاری افقی).

شما همچنین می‌توانید از container-name برای نام‌گذاری کانتینر خود استفاده کنید، که به شما امکان می‌دهد در صورت داشتن بسترهای کانتینر تو در تو، کانتینرهای خاصی را هدف قرار دهید.

پس از ایجاد بستر کانتینر، می‌توانید از قانون @container برای تعریف استایل‌هایی استفاده کنید که در صورت برآورده شدن شرایط خاصی اعمال می‌شوند.

قدرت عملگرهای منطقی: 'and'، 'or' و 'not'

جادوی واقعی زمانی اتفاق می‌افتد که کوئری‌های کانتینر را با عملگرهای منطقی ترکیب می‌کنید. این عملگرها به شما اجازه می‌دهند شرایط پیچیده‌ای ایجاد کنید که وضعیت‌های خاص کانتینر را هدف قرار می‌دهند. بیایید هر عملگر را به تفصیل بررسی کنیم.

عملگر 'and': نیازمند بودن به چندین شرط

عملگر and به شما امکان می‌دهد چندین شرط را با هم ترکیب کنید و برای اعمال استایل‌ها لازم است که همه شرایط برآورده شوند. این زمانی مفید است که می‌خواهید کانتینرهایی را هدف قرار دهید که به طور همزمان معیارهای اندازه و وضعیت خاصی را برآورده می‌کنند.

مثال: فرض کنید کانتینری دارید که می‌خواهید اگر هم عرض آن بیشتر از 500 پیکسل باشد و هم یک ویژگی داده (data attribute) خاص برای آن تنظیم شده باشد، استایل متفاوتی به آن بدهید.

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) and (data-theme="dark") {
  .card {
    background-color: #333;
    color: #fff;
  }
}

            

              
                Copy
              
            
          

در این مثال، .card تنها در صورتی پس‌زمینه تیره و متن سفید خواهد داشت که عرض .card-container حداقل 500 پیکسل باشد و ویژگی data-theme آن روی "dark" تنظیم شده باشد. اگر هر یک از این شرایط برآورده نشود، استایل‌های داخل قانون @container اعمال نخواهند شد.

موارد استفاده کاربردی برای 'and':

• تغییرات طرح‌بندی شرطی: تغییر طرح‌بندی یک کامپوننت بر اساس عرض آن و وجود یک کلاس یا ویژگی داده خاص (مثلاً، تغییر از طرح‌بندی تک‌ستونی به چندستونی اگر کانتینر به اندازه کافی عریض باشد و کلاس "featured" داشته باشد).
• استایل‌دهی مخصوص تم: اعمال استایل‌های مختلف بر اساس تم کانتینر (مثلاً، حالت تیره یا روشن) و اندازه آن.
• استایل‌دهی مبتنی بر وضعیت: تنظیم ظاهر یک کامپوننت بر اساس اندازه و وضعیت خاص آن (مثلاً، "active"، "disabled").

عملگر 'or': برآورده کردن حداقل یک شرط

عملگر or به شما امکان می‌دهد استایل‌ها را در صورتی اعمال کنید که حداقل یکی از شرایط مشخص شده برآورده شود. این زمانی مفید است که می‌خواهید کانتینرهایی را هدف قرار دهید که در محدوده‌های اندازه مختلف قرار می‌گیرند یا وضعیت‌های متفاوتی دارند.

مثال: فرض کنید می‌خواهید استایل خاصی را به یک کانتینر اعمال کنید اگر عرض آن کمتر از 300 پیکسل یا بیشتر از 800 پیکسل باشد.

            
.card-container {
  container-type: inline-size;
}

@container (max-width: 300px) or (min-width: 800px) {
  .card {
    padding: 1em;
    border: 1px solid #ccc;
  }
}

            

              
                Copy
              
            
          

در این مثال، .card دارای پدینگ 1em و یک حاشیه خواهد بود اگر عرض .card-container کمتر از 300 پیکسل یا بیشتر از 800 پیکسل باشد. اگر عرض کانتینر بین 300 پیکسل و 800 پیکسل (شامل این دو) باشد، استایل‌های داخل قانون @container اعمال نخواهند شد.

موارد استفاده کاربردی برای 'or':

• مدیریت اندازه‌های مختلف صفحه: اعمال استایل‌های مختلف به یک کامپوننت بر اساس اینکه در یک صفحه کوچک (مثلاً، دستگاه موبایل) یا یک صفحه بزرگ (مثلاً، دسکتاپ) نمایش داده می‌شود.
• ارائه طرح‌بندی‌های جایگزین: ارائه طرح‌بندی‌های مختلف برای یک کامپوننت بسته به اینکه مقدار مشخصی از فضای در دسترس را داشته باشد.
• پشتیبانی از تم‌های چندگانه: اعمال استایل‌های خاص برای تم‌ها یا انواع مختلف یک کامپوننت. به عنوان مثال، یک کامپوننت ممکن است استایل‌های متفاوتی داشته باشد بسته به اینکه در یک زمینه "اصلی" یا "ثانویه" استفاده می‌شود، صرف نظر از اندازه آن.

عملگر 'not': مستثنی کردن شرایط خاص

عملگر not به شما امکان می‌دهد استایل‌ها را زمانی اعمال کنید که یک شرط خاص برآورده نشده باشد. این می‌تواند برای معکوس کردن منطق یا هدف قرار دادن کانتینرهایی که ویژگی خاصی ندارند، مفید باشد.

مثال: فرض کنید می‌خواهید یک استایل خاص را به یک کانتینر اعمال کنید مگر اینکه کلاس "featured" را داشته باشد.

            
.card-container {
  container-type: inline-size;
}

@container not (.featured) {
  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

            

              
                Copy
              
            
          

در این مثال، به .card یک سایه جعبه (box shadow) اعمال می‌شود مگر اینکه .card-container کلاس "featured" را داشته باشد. اگر کانتینر کلاس "featured" را داشته باشد، سایه جعبه اعمال نخواهد شد.

موارد استفاده کاربردی برای 'not':

• اعمال استایل‌های پیش‌فرض: از not برای اعمال استایل‌های پیش‌فرض به عناصری که کلاس یا ویژگی خاصی ندارند، استفاده کنید. این می‌تواند با جلوگیری از نیاز به بازنویسی استایل‌ها در موارد خاص، CSS شما را ساده‌تر کند.
• معکوس کردن منطق شرطی: گاهی اوقات تعریف استایل‌ها بر اساس چیزی که نباید باشد، آسان‌تر است. not به شما اجازه می‌دهد منطق خود را معکوس کرده و عناصری را که شرط خاصی را برآورده نمی‌کنند، هدف قرار دهید.
• ایجاد استثنائات: از not برای ایجاد استثنائات در یک قانون استایل‌دهی کلی استفاده کنید. به عنوان مثال، ممکن است یک استایل خاص را به تمام کانتینرها اعمال کنید به جز آن‌هایی که در بخش خاصی از صفحه قرار دارند.

ترکیب عملگرهای منطقی برای شرایط پیچیده

قدرت واقعی عملگرهای منطقی کوئری کانتینر از ترکیب آن‌ها برای ایجاد شرایط پیچیده ناشی می‌شود. شما می‌توانید از پرانتز برای گروه‌بندی شرایط و کنترل ترتیب ارزیابی استفاده کنید، مشابه کاری که در جاوااسکریپت یا سایر زبان‌های برنامه‌نویسی انجام می‌دهید.

مثال: فرض کنید می‌خواهید یک استایل خاص را به یک کانتینر اعمال کنید اگر عرض آن بیشتر از 600 پیکسل باشد و یا کلاس "primary" را داشته باشد یا کلاس "secondary" را نداشته باشد.

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 600px) and (.primary or not(.secondary)) {
  .card {
    border: 2px solid blue;
  }
}

            

              
                Copy
              
            
          

در این مثال، .card یک حاشیه آبی خواهد داشت اگر شرایط زیر برآورده شوند:

1. عرض .card-container بیشتر از 600 پیکسل باشد.
2. و یکی از موارد زیر برقرار باشد:
• .card-container کلاس "primary" را داشته باشد.
• یا .card-container کلاس "secondary" را نداشته باشد.

این مثال نشان می‌دهد که چگونه می‌توانید با استفاده از عملگرهای منطقی ترکیبی، قوانین استایل‌دهی بسیار خاص و دقیقی ایجاد کنید.

نکاتی که باید هنگام ترکیب عملگرها به خاطر داشته باشید:

• اولویت عملگرها: در حالی که پرانتزها به کنترل ترتیب ارزیابی کمک می‌کنند، درک اولویت پیش‌فرض عملگرهای منطقی مهم است. در کوئری‌های کانتینر CSS، and اولویت بالاتری نسبت به or دارد. این بدان معناست که (A or B) and C با A or (B and C) متفاوت است. برای تعریف صریح ترتیب ارزیابی و جلوگیری از ابهام از پرانتز استفاده کنید.
• خوانایی: شرایط پیچیده می‌توانند خواندن و درکشان دشوار شود. شرایط پیچیده را با استفاده از پرانتز و کامنت به بخش‌های کوچکتر و قابل مدیریت‌تر تقسیم کنید تا خوانایی و قابلیت نگهداری را بهبود بخشید.
• تست کردن: کوئری‌های کانتینر خود را با اندازه‌ها و وضعیت‌های مختلف کانتینر به طور کامل تست کنید تا مطمئن شوید که طبق انتظار رفتار می‌کنند. از ابزارهای توسعه‌دهنده مرورگر برای بازرسی استایل‌های اعمال شده و تأیید اینکه قوانین صحیح در حال اعمال هستند، استفاده کنید.

مثال‌های واقعی و موارد استفاده

بیایید چند مثال واقعی از نحوه استفاده از عملگرهای منطقی کوئری کانتینر برای ایجاد طرح‌بندی‌های سازگار و واکنش‌گرا را بررسی کنیم.

مثال ۱: یک کامپوننت کارت انعطاف‌پذیر

یک کامپوننت کارت را در نظر بگیرید که اطلاعات را بسته به عرض خود به روش‌های مختلفی نمایش می‌دهد. ما می‌توانیم از کوئری‌های کانتینر با عملگرهای منطقی برای کنترل طرح‌بندی و ظاهر کارت استفاده کنیم.

            

  

    
    
Card Title
    
Card Description
    Learn More
  


            

              
                Copy
              
            
          

            
.card-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px; /* Example max-width */
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 1em;
}

.card img {
  width: 100%;
  max-width: 200px; /* Example max-width for the image */
  margin-bottom: 1em;
}

/* Default styles for small containers */
@container (max-width: 400px) {
  .card {
    text-align: center;
  }

  .card img {
    margin: 0 auto 1em;
  }
}

/* Styles for medium containers */
@container (min-width: 401px) and (max-width: 600px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

/* Styles for large containers */
@container (min-width: 601px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

            

              
                Copy
              
            
          

در این مثال:

• برای کانتینرهایی با عرض 400 پیکسل یا کمتر، عناصر کارت در مرکز قرار می‌گیرند.
• برای کانتینرهای بین 401 پیکسل و 600 پیکسل، تصویر و متن در یک ردیف نمایش داده می‌شوند، با تصویر در سمت چپ.
• برای کانتینرهای عریض‌تر از 600 پیکسل، طرح‌بندی مانند کانتینر متوسط باقی می‌ماند، اما آیتم‌ها در ابتدا تراز می‌شوند.

مثال ۲: یک منوی ناوبری واکنش‌گرا

مثال کاربردی دیگر، یک منوی ناوبری واکنش‌گرا است که بر اساس فضای موجود سازگار می‌شود. ما می‌توانیم از کوئری‌های کانتینر برای جابجایی بین یک منوی فشرده مبتنی بر آیکون و یک منوی کامل مبتنی بر متن استفاده کنیم.

            


            

              
                Copy
              
            
          

            
.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 0.5em;
}

.nav-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}

.nav-container li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  padding: 0.5em;
}

.nav-container i {
  font-size: 1.2em;
  margin-right: 0.5em;
}

.nav-container span {
  display: none; /* Hide text by default */
}

/* Styles for larger containers */
@container (min-width: 400px) {
  .nav-container span {
    display: inline; /* Show text for larger containers */
  }
}

            

              
                Copy
              
            
          

در این مثال، آیتم‌های منوی ناوبری در ابتدا فقط آیکون‌ها را نمایش می‌دهند. هنگامی که کانتینر عریض‌تر از 400 پیکسل باشد، برچسب‌های متنی در کنار آیکون‌ها نمایش داده می‌شوند و منوی توصیفی‌تری ایجاد می‌کنند.

مثال ۳: بین‌المللی‌سازی و جهت متن

کوئری‌های کانتینر همچنین می‌توانند برای تطبیق طرح‌بندی‌ها بر اساس جهت متن مفید باشند. این امر به ویژه برای وب‌سایت‌های بین‌المللی که از زبان‌های راست به چپ (RTL) مانند عربی یا عبری پشتیبانی می‌کنند، مهم است.

            

  

    
Article Title
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
  


            

              
                Copy
              
            
          

            
.article-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.article {
  padding: 1em;
}

/* Default styles for LTR (Left-to-Right) */
.article h1 {
  text-align: left;
}

/* Styles for RTL (Right-to-Left) */
@container (dir(rtl)) {
  .article h1 {
    text-align: right;
  }
}

            

              
                Copy
              
            
          

در این مثال، کوئری کانتینر dir(rtl) کانتینرهایی را هدف قرار می‌دهد که ویژگی dir آن‌ها روی "rtl" تنظیم شده است. هنگامی که جهت متن RTL باشد، عنوان به سمت راست تراز می‌شود. این تضمین می‌کند که طرح‌بندی برای زبان‌ها و سیستم‌های نوشتاری مختلف به درستی تطبیق داده شود.

بهترین شیوه‌ها برای استفاده از عملگرهای منطقی کوئری کانتینر

برای بهره‌برداری حداکثری از عملگرهای منطقی کوئری کانتینر، بهترین شیوه‌های زیر را در نظر داشته باشید:

• ساده شروع کنید: با کوئری‌های کانتینر پایه شروع کنید و به تدریج عملگرهای منطقی را در صورت نیاز معرفی کنید. از ایجاد شرایط بیش از حد پیچیده که درک و نگهداری آن‌ها دشوار است، خودداری کنید.
• از نام‌های معنادار استفاده کنید: از نام‌های کلاس و ویژگی‌های داده توصیفی استفاده کنید تا کوئری‌های کانتینر شما خواناتر و خود-مستندسازتر شوند.
• خوانایی را در اولویت قرار دهید: از پرانتزها و کامنت‌ها برای بهبود خوانایی شرایط پیچیده استفاده کنید. شرایط طولانی را به بخش‌های کوچکتر و قابل مدیریت‌تر تقسیم کنید.
• به طور کامل تست کنید: کوئری‌های کانتینر خود را با اندازه‌ها و وضعیت‌های مختلف کانتینر تست کنید تا مطمئن شوید که طبق انتظار رفتار می‌کنند. از ابزارهای توسعه‌دهنده مرورگر برای بازرسی استایل‌های اعمال شده و تأیید اینکه قوانین صحیح اعمال می‌شوند، استفاده کنید.
• عملکرد را در نظر بگیرید: در حالی که کوئری‌های کانتینر به طور کلی عملکرد خوبی دارند، شرایط پیچیده به طور بالقوه می‌توانند بر عملکرد تأثیر بگذارند. از ایجاد شرایط بیش از حد پیچیده که نیاز به محاسبات گسترده توسط مرورگر دارند، خودداری کنید.
• ارتقاء تدریجی (Progressive Enhancement): از کوئری‌های کانتینر به عنوان یک ارتقاء تدریجی استفاده کنید. برای مرورگرهایی که از کوئری‌های کانتینر پشتیبانی نمی‌کنند، یک جایگزین (fallback) فراهم کنید تا سطح پایه‌ای از عملکرد تضمین شود.
• کد خود را مستند کنید: کوئری‌های کانتینر و منطق پشت آن‌ها را به وضوح مستند کنید. این کار درک و نگهداری کد شما را در آینده برای شما و سایر توسعه‌دهندگان آسان‌تر می‌کند.

نتیجه‌گیری: پذیرش انعطاف‌پذیری منطق کوئری کانتینر

عملگرهای منطقی کوئری کانتینر CSS ابزاری قدرتمند برای ایجاد طرح‌بندی‌های بسیار واکنش‌گرا و سازگار فراهم می‌کنند. با ترکیب 'and'، 'or' و 'not'، می‌توانید شرایط پیچیده‌ای ایجاد کنید که وضعیت‌های خاص کانتینر را هدف قرار داده و استایل‌ها را بر اساس آن اعمال می‌کنند. این امر امکان کنترل دقیق‌تر بر طرح‌بندی‌های شما را فراهم کرده و طراحی واکنش‌گرای واقعاً مبتنی بر کامپوننت را ممکن می‌سازد.

با ادامه رشد پشتیبانی از کوئری‌های کانتینر، تسلط بر این تکنیک‌ها برای توسعه‌دهندگان فرانت‌اند اهمیت فزاینده‌ای خواهد یافت. با پیروی از بهترین شیوه‌های ذکر شده در این راهنما و آزمایش با موارد استفاده مختلف، می‌توانید پتانسیل کامل کوئری‌های کانتینر را آزاد کرده و تجربیات کاربری استثنایی را در طیف گسترده‌ای از دستگاه‌ها و زمینه‌ها ایجاد کنید.

انعطاف‌پذیری منطق کوئری کانتینر را بپذیرید و مهارت‌های طراحی واکنش‌گرای خود را به سطح بالاتری ارتقا دهید!